<template>
<!--最外层的div-->
  <div id="div_big">
<!--预约维修服务那些的div-->
    <div id="div_top">
      <!--ul开始-->
      <ul id="ul_style">
        <li>
          <i class="el-icon-setting"></i>
          <a href="">预约维修服务</a>
          <span style="margin-left: 32px; "> | </span>
        </li>

        <li>
          <i class="el-icon-truck"></i>
          <a href="">7天无理由退货</a>
          <span style="margin-left: 32px; "> | </span>
        </li>

        <li>
          <i class="el-icon-sort"></i>
          <a href="">15天无理由换货</a>
          <span style="margin-left: 32px; "> | </span>
        </li>

        <li>
          <i class="el-icon-goods"></i>
          <a href="">满69元包邮</a>
          <span style="margin-left: 32px; "> | </span>
        </li>

        <li>
          <i class="el-icon-location-outline"></i>
          <a href="">1100余家售后网点</a>
        </li>
      </ul>
      <!--ul结束-->
    </div>

    <el-divider></el-divider>

    <div id="div_foot" style="width: 1226px">
<!--选购指南,服务中心那一横排的div-->
      <div id="div_middle_font">
          <ul>
            <li>选购指南</li>
            <li>服务中心</li>
            <li>线下门店</li>
            <li>关于我们</li>
            <li>关注我们</li>
          </ul>
      </div>
<!--五个竖排的div-->
      <div class="div_small_font">
          <ul id="ul_1">
            <li><a href="">手机</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">笔记本</a></li>
            <li><a href="">平板</a></li>
            <li><a href="">穿戴</a></li>
            <li><a href="">耳机</a></li>
            <li><a href="">家电</a></li>
            <li><a href="">路由器</a></li>
            <li><a href="">音箱</a></li>
            <li><a href="">配件</a></li>
          </ul>
      </div>
      <div class="div_small_font">
        <ul id="ul_2">
          <li><a href="">申请售后</a></li>
          <li><a href="">售后政策</a></li>
          <li><a href="">维修服务价格</a></li>
          <li><a href="">订单查询</a></li>
          <li><a href="">以旧换新</a></li>
          <li><a href="">保障服务</a></li>
          <li><a href="">防伪查询</a></li>
          <li><a href="">F码通道</a></li>
        </ul>
      </div>

      <div class="div_small_font">
        <ul id="ul_3">
          <li><a href="">优宜佳之家</a></li>
          <li><a href="">服务网点</a></li>
          <li><a href="">授权体验店/专区</a></li>
        </ul>
      </div>

      <div class="div_small_font">
        <ul id="ul_4">
          <li><a href="">了解优宜佳</a></li>
          <li><a href="">加入优宜佳</a></li>
          <li><a href="">投资者关系</a></li>
          <li><a href="">环境,社会及管治</a></li>
          <li><a href="">廉洁举报</a></li>
        </ul>
      </div>

      <div class="div_small_font">
        <ul id="ul_5">
          <li><a href="">新浪微博</a></li>
          <li><a href="">官方微信</a></li>
          <li><a href="">联系我们</a></li>
          <li><a href="">公益基金会</a></li>
        </ul>
      </div>
      
      <div>
        <img src="../assets/img_foot.png" alt="" id="img_logo">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "foot"
}
</script>

<style>
#div_big{
  width: 1226px;
  margin: 0 auto;
}

#div_top {
  width: 1226px;
  height: 80px;
}

#ul_style > li > i {
  padding-right: 5px;
}

#ul_style {
  list-style-type: none;
  font-size: 16px;
}

#ul_style > li {
  float: left;
  margin: 0 32px;
  line-height: 80px;
}

#ul_style a {
  text-decoration: none;
  color: #616161;;
}

#ul_style a:hover {
  color: #e79c11;
}


#div_foot{
  width: 1226px;
  height: 388px;
}

#div_middle_font>ul{
  list-style-type: none;
  margin-left: 80px;
}

#div_middle_font li{
  margin: 0 50px 0 50px;
  float: left;
  font-size: 14px;
}


.div_small_font{
  margin-top: 20px;
  position: absolute;
}

.div_small_font ul{
  list-style-type: none;
  float: left;
}

.div_small_font a:hover{
  color: #e79c11;
}
#ul_1{
  position: relative;
  left: 130px;
  text-align: left;
}

#ul_2{
  position: relative;
  left: 285px;
  text-align: left;
}

#ul_3{
  position: relative;
  left: 440px;
  text-align: left;
}

#ul_4{
  position: relative;
  left: 595px;
  text-align: left;
}

#ul_5{
  position: relative;
  left: 755px;
  text-align: left;
}
.div_small_font li{
  margin-top: 12px;
}

.div_small_font a{
  text-decoration: none;
  font-size: 12px;
  color: #757575;
}

#img_logo{
  float: right;
  margin-right: 40px;
}
</style>